<template>
  <div id="user_parking">
    <el-main>
      <el-table :data="parking">
        <el-table-column prop="parkingSpaceNumber" label="停车位" width="100"></el-table-column>
        <el-table-column prop="address" label="区域" width="100"></el-table-column>
        <el-table-column prop="price" width="300" label="每小时价格">
          <template slot-scope="{row: {price}}">
            <span>{{ price }}元</span>
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态" width="150">
          <template slot-scope="{row: {state}}">
            <span v-if="+state === 0">空闲</span>
            <span v-else-if="+state === 1">占用</span>
          </template>
        </el-table-column>
        <el-table-column prop="state" label="操作" width="200">
          <template slot-scope="scope">
            <el-popconfirm
                confirm-button-text='好的'
                cancel-button-text='不用了'
                icon="el-icon-info"
                icon-color="red"
                title="确定要删除这个停车位吗？"
                @confirm="deleteParking(scope.row.id,scope.row.address)">
              <el-button slot="reference">删除</el-button>
            </el-popconfirm>
            <el-button
                @click="updateParking(scope.row.id,scope.row.address,scope.row.parkingSpaceNumber,scope.row.price,scope.row.state)"
                slot="reference">修改
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
  </div>
</template>

<script>
export default {
  name: "superUser_parking",
  data() {
    return {
      parkingSpaceNumber: '',
    }
  },
  props: {
    parking: {
      type: Array,
      default: () => []
    },
    email: null,
  },
  methods: {
    updateParking(id, address, parkingSpaceNumber, price, state) {
      console.log(id);
      console.log(address);
      console.log(parkingSpaceNumber);
      console.log(price);
      console.log(state);
      this.$router.push({
        name: 'superUser_add',
        query: {
          id: id,
          address: address,
          parkingSpaceNumber: parkingSpaceNumber,
          price: price,
          state: state,
          email:this.email,
        }
      })
    },
    deleteParking(id, address) {
      this.$http.get("http://localhost:8088/superUser/deleteParking", {
        params: {
          id: id,
        }
      }).then(resp => {
        console.log(resp)
        this.$http.get("http://localhost:8088/user/findParkingByAddress", {
          params: {
            address: address,
          }
        }).then(resp => {
          this.parking = resp.data
          this.$router.push({
            name: 'superUser_parking',
            query: {
              parking: this.parking,
              email: this.user,
            }
          }).catch(err => {
            console.log(err)
          })
        }).catch({})
      })
    },
  },
}
</script>

<style scoped>
#user_parking {
  width: 100%;
}

.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

el-header {
  width: 100%;
}

.el-aside {
  color: #333;
}
</style>